<!-- https://tburleson-layouts-demos.firebaseapp.com/#/docs -->
<div fxLayout="row" fxFill>
  <mat-card fxFlex="30" fxLayout="column" >
    <div fxFlex="90" class="chat-container" #scrollMe>
      <div *ngFor="let message of messages"  [@listAnimation]="messages.length" >

        <div  *ngIf="message.author=='user'" class="chat-message">
          <div class="chat-message-content human">
            <span class="textright">{{message.content}}</span>
          </div>
        </div>

          <div  *ngIf="message.author=='chat'" class="chat-message">
            <div class="chat-message-content">
              <span class="textleft" [innerHTML]="message.content"></span>
            </div>
          </div>


      </div>
    </div>
    
      <form [formGroup]="chatForm" *ngIf="chatForm" (submit)="send()" fxLayout="row" fxFlex="10" >
        <mat-input-container fxFlex>
          <input type="text" matInput formControlName="input" placeholder="Type your message here" autocomplete=off>
        </mat-input-container>
      </form>
    </mat-card>
    
    <mat-card fxFlex="50" class="json-response">
      <h3>POST /api/v1</h3>
      <pre>{{prettyChatCurrent}}</pre>
    </mat-card>
</div> 